<template>
    <div class="heart">
      <el-breadcrumb separator="">
        <el-breadcrumb-item :to="{ path: '/company/companyInfo' }">系统设置</el-breadcrumb-item>
        <el-breadcrumb-item
          ><a></a></el-breadcrumb-item
        >
      </el-breadcrumb>
      <el-card style="height: 70px; margin-top: 20px;" shadow="hover">
        <el-button type="primary" style="width: 80px;">添加</el-button>
        <el-button type="danger" style="width: 80px;">删除</el-button>
      </el-card>
      <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      @selection-change="handleSelectionChange"
      @sort-change="handleSort"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID"  />
      <el-table-column prop="userName" label="用户名"  />
      <el-table-column label="性别" width="180" :filters="[
        { text: '男', value: '1' },
        { text: '女', value: '0' },
      ]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
        <template #default="scope">
            <span >{{ scope.row.sex == 1 ? '男' : '女' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="注册邮箱" />
      <el-table-column prop="registerTime" label="注册时间" sortable  />
      <el-table-column prop="address" label="地址" />
      <el-table-column label="状态" width="180">
        <template #default="scope">
            <span :class="scope.row.status == 1 ? 'normal' : 'banned' "  >{{ scope.row.status == 1 ? '正常' : '禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button  @click="handleEdit(scope.$index, scope.row)"  size="small" type="danger"
            >禁用</el-button
          >
          <el-button  @click="handleEdit(scope.$index, scope.row)"  size="small"
            >编辑</el-button 
          >
          <el-button
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination v-model:page="page"  :total="total" @pagination="getData" />
    </div>
    </div>
      
  </template>
  <script lang="ts" setup>
  import { ref, watch, onMounted, reactive,  } from 'vue'
  import Pagination from '../components/Pagination.vue'
    let companyName =  ref('')
    onMounted(()=>{
      console.log(tableData.value)
    })
    const tableData = ref([
      {
          "id":1,
          "userName": "小明",
          "sex": 1,
          "phone": '2910874384@qq.com',
          "registerTime": "1981-07-07",
          "address": "武汉大学",
          "status": 1
        },
        {
          "id":2,
          "userName": "小红",
          "sex": 1,
          "phone": '2910874384@qq.com',
          "registerTime": "1981-07-05",
          "address": "武汉大学",
          "status": 0
        },
        {
          "id":3,
          "userName": "小栏",
          "sex": 0,
          "phone": '2910874384@qq.com',
          "registerTime": "1981-07-04",
          "address": "武汉大学",
          "status": 1
        },
        {
          "id":4,
          "userName": "小率",
          "sex": 0,
          "phone": '2910874384@qq.com',
          "registerTime": "1981-07-02",
          "address": "武汉大学",
          "status": 1
        },
        {
          "id":5,
          "userName": "小带",
          "sex": 0,
          "phone": '2910874384@qq.com',
          "registerTime": "1981-08-06",
          "address": "武汉大学",
          "status": 0
        },
        {
          "id":6,
          "userName": "小大",
          "sex": 1,
          "phone": '2910874384@qq.com',
          "registerTime": "1981-08-06",
          "address": "武汉大学",
          "status": 1
        },
        {
          "id":7,
          "userName": "小明",
          "sex": 0,
          "phone": '2910874384@qq.com',
          "registerTime": "1981-03-06",
          "address": "武汉大学",
          "status": 1
        },
        {
          "id":8,
          "userName": "小明",
          "sex": 0,
          "phone": '2910874384@qq.com',
          "registerTime": "1981-05-06",
          "address": "武汉大学",
          "status": 0
        },
        {
          "id":9,
          "userName": "小明",
          "sex": 1,
          "phone": '2910874384@qq.com',
          "registerTime": "1981-12-06",
          "address": "武汉大学",
          "status": 0
        },
        {
          "id":10,
          "userName": "小明",
          "sex": 0,
          "phone": '2910874384@qq.com',
          "registerTime": "1981-01-06",
          "address": "武汉大学",
          "status": 0
        },
    ])
    interface Company {
      id: number,
      companyName: string,
      companyStatus: number,
      isImportant: boolean,
      createTime: string,
      uniCode: string,
      contactPerson: string,
      contactNumber: string,
      industry: string,
      location: number[],
      hasLine: boolean,
      isUsing: boolean
    }
    let selected = ref<number[]>([])
    const handleSelectionChange = (a:Company[])=>{
      selected.value = [];
      a.forEach((row:Company)=>{
        selected.value.push(row.id)
      })
      console.log(selected.value)
    }
  
    let handleSort = (data: {column: any, prop: string, order: any })=>{
      console.log(data)
    }
    let filterTag = ()=>{
      
    }
    let currentPage = ref(1)
    let pageSize = ref(10)
    let total = ref(100)
    let page = ref(1)
  </script>
  <style>
    .heart{
      width: 95%;
      margin: 20px auto;
    }
    .search{
      margin-top: 50px;
      display: flex;
      justify-content: space-around;
    }
    .pagination{
      margin-top: 40px;
      display: flex;
      justify-content: center;
    }
    .normal{
        color: blue;
    }
    .banned{
        color: red;
    }
  </style>